<template>
  <div class="filter-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <!-- input -->
      <el-form-item v-for="(item,index) in forms.op" :key="index" :label="item.label||'参数:'">
        <el-input v-if="item.type==='input'" v-model="forms.filter[item.key]" placeholder="审批人" />
        <!-- select -->
        <el-select v-if="item.type==='select'" v-model="forms.filter[item.key]" label="标题" :placeholder="item.placeholder" clearable class="filter-item" style="width: 130px">
          <el-option v-for="(options,indexse) in item.options" :key="indexse" :label="options.name" :value="options.id" />
        </el-select>
        <!-- time -->
        <el-time-select v-if="item.type==='time'" v-model="forms.filter[item.key]" :placeholder="item.placeholder" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <!-- date -->
        <el-date-picker v-if="item.type==='date'" v-model="forms.filter[item.key]" label="标题" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期" />
      </el-form-item>
      <el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
          搜索
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    listQuery: {
      default: null,
      type: Object
    }
  },
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      listQuerys: {
        page: 1,
        limit: 15,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      forms: {
        filter: {
          name: '',
          sele: '',
          time: '',
          date: ''
        },
        op: [
          { key: 'name', op: 'like', placeholder: '请输入', type: 'input' },
          { key: 'time', op: '=', placeholder: '请输入', type: 'time' },
          { key: 'date', op: '=', placeholder: '请输入', type: 'date' },
          { key: 'sele', op: '=', placeholder: '请选择', type: 'select',
            options: [
              { id: 1, name: '选项1' },
              { id: 2, name: '选项3' },
              { id: 3, name: '选项2' },
              { id: 4, name: '选项4' }
            ]
          }
        ]
      }
    }
  },
  methods: {
    handleFilter() {
      const queryForm = {}
      this.forms.op.forEach(element => {
        queryForm[element.key] = element.op
      })
      const submitForm = { filter: this.forms.filter, op: queryForm }
      this.$emit('searchSumit', submitForm)
    }
  }
}
</script>
<style scoped>
.filter-item{ display: inline-block;}
</style>
